<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.引入 ECharts 文件 -->
    <script src="./echarts/echarts.min.js"></script>
</head>

<body>
    <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

        // 3.1 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));

        option = {
            //鼠标移入提示
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%']
                }
            },
            // 标题
            title: {
                text: '薪资 Salary',
                textStyle: {
                    color: '#6d767e'
                }
            },
            //x轴数据: 必须
            xAxis: {
                type: 'category', // 类别
                boundaryGap: false, // 两侧留白
                data: [
                    "龚洋",
                    "汤强",
                    "汤平",
                    "龚丽",
                    "戴桂英",
                    "袁刚",
                    "易秀英",
                    "黎娟",
                    "谭芳",
                    "马平",
                ]
            },
            //y轴数据：必须
            yAxis: {
                type: 'value',
                boundaryGap: [0, '50%'] // Y轴留白，会影响最大值，最小值
            },
            // 顶部小提示
            legend: { top: 20 },
            // 缩放工具栏
            dataZoom: [
                {
                    // inside鼠标滚轮实现缩放，slider通过滑动条实现缩放(默认值)
                    type: 'slider',
                    start: 0, // 起始位置
                    end: 20 // 结束位置
                }
            ],
            series: [
                {
                    name: '期望薪资',
                    type: 'line',
                    symbol: 'none',
                    smooth: true, //设置折线圆角
                    itemStyle: {
                        color: '#ee6666'
                    },
                    data: [
                        15001,
                        18346,
                        10834,
                        7766,
                        11621,
                        14743,
                        17180,
                        9449,
                        14109,
                        14575,

                    ]
                }, {
                    name: '实际薪资',
                    type: 'line',
                    symbol: 'none',
                    smooth: true, 
                    itemStyle: {
                        color: '#5470c6'
                    },
                    data: [19645,
                        12381,
                        17572,
                        8080,
                        13270,
                        6005,
                        8644,
                        16601,
                        10887,
                        13961,
                        8288,
                    ]
                }
            ]
        }


        // 3.3使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>